<template>
  <div>
    <el-container>
      <el-header class="nav1">
        <div class="nav1" :class="navBarFixed == true ? 'navBarWrap1' :''"></div>
      </el-header>


      <el-card class="nav2" :class="navBarFixed == true ? 'navBarWrap2' :''" style="height: auto">
        <div style="margin: 0 auto;border: 0 solid red;width: 250px;height: 350px;">
          <div style="position: absolute;left: 70px;">
            <el-avatar :size="160" :src="userRuleForm.avatar"/>
          </div>

          <div style="position: absolute;top: 200px;text-align:center;border: 0 solid blue;width: 250px;height: 100px;">
            <h3 style="left: 145px">{{ userRuleForm.nick }}</h3><br>

            <div style="width: 150px;position: absolute;left:0px;top: 50px;">
              <table style="text-align: center;width: 250px;">
                <tr style="text-align: center">
                  <td>浏览量</td>
                  <td>收藏量</td>
                  <td>点赞量</td>
                </tr>

                <tr style="text-align: center">
                  <td>{{ articleRuleForm.viewCount }}</td>
                  <td>7</td>
                  <td>{{ articleRuleForm.praiseCount }}</td>

                </tr>

              </table>
            </div>
            <p style="position: absolute;left:1px;top: 140px;text-align: left;font-size: 14px">
              个性标签：{{ userRuleForm.signature }}</p>
          </div>
        </div>
        <div >
          <el-row v-if="concerned" >
            <el-button @click="deleteFollowByUserId(articleRuleForm.userId)" style="float: left;margin-left: 90px; margin-top: 30px" round>已关注</el-button>
          </el-row>
          <el-row v-else >
            <el-button @click="insertFollowByUserId(articleRuleForm.userId)" style="float: left;margin-left: 90px; margin-top: 30px" round>关 注</el-button>
          </el-row>
        </div>
      </el-card>


      <el-card style="width: 1200px;height:600px;position: absolute;left: 320px;top: 60px;">
        <h2 style="text-align: center">{{articleRuleForm.title}}&nbsp;&nbsp;<button @click="downloadClick">下载</button></h2>
        <br>
        <h4 style="text-align: center">作者：{{userRuleForm.nick }} | 发布时间：{{articleRuleForm.gmtCreatePush}}</h4><br>

<!--        <el-image :src="articleRuleForm.viewPicture" alt="图片未加载"></el-image>-->

        <mavon-editor
            class="md"
            :value="articleRuleForm.content"
            :subfield="false"
            :defaultOpen="'preview'"
            :toolbarsFlag="false"
            :editable="false"
            :scrollStyle="true"
            :ishljs="true"
        />

      </el-card>
    </el-container>

    <el-form style="width: 300px;height: 192px;margin-top: 450px" >
      <div>
        <el-card>
          <h4 style="margin: 0">网友评论</h4>
          <el-col v-for="a in commentArr">
            <p style="margin: 0;padding: 5px;font-family: 黑体">{{a.nick}}说:{{a.content}}</p>
          </el-col>

          <input style="width: 180px;height: 30px;" type="text" aria-placeholder="请输入内容..." v-model="content"></input>
          <el-button style="width: 60px;text-align: left"  type="primary" @click="pushComment">发表</el-button>
        </el-card>
      </div>

    </el-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      content:"",
      commentArr :[],
      userRuleForm: {
        id: '',
        avatar: '',
        nick: '',
        gender: 1,
        phone: '',
        signature: '',
        optionsSelect: [],
      },
      userUserAddNewDTO:{
        bloggerId:''
      },
      concerned: false, //是否关注
      articleRuleForm: {
        id: '',
        title: "无数据",
        categoryName: '无数据',
        tagId: 0,
        userId: 0,
        categoryId: 0,
        viewPicture: '',
        tags: [],
        tagName: '',
        content: "",
        praiseCount: '',
        viewCount: '',
        gmtCreate: '',
        gmtCreatePush: '',
        gmtModified: ''
      },
      navBarFixed: false,     // 是否吸顶
      examId: null,
      examRow: {},
      articleCount: '',        // 当前作者发表文章的数量
      id: -1,                  // 页面传值文章id

    };
  },

  methods: {
    //关注用户
    insertFollowByUserId(bloggerId){
      /*判断jwt*/
      this.Token = localStorage.getItem("jwt");
      if(this.Token!=null||this.Token!='') {
        this.userUserAddNewDTO.bloggerId = bloggerId;

        this.axios.post('http://localhost:9090/follows/insertUserUser',this.userUserAddNewDTO).then((response) => {
          console.info(response.data)
          switch (response.data.code) {
            case 200:
              this.concerned=true;
              this.$message({
                message: response.data.data,
                type: 'success'
              });
              break;
            default:
              this.$message({
                type: 'error',
                message: response.data.message
              })
              break;
          }

        })
      }else{
        this.$message({
          type: 'error',
          message: '请登录'
        })
      }

    },

    // 取消关注
    deleteFollowByUserId(bloggerId){
      console.info(bloggerId)
      this.userUserAddNewDTO.bloggerId = bloggerId;
      this.axios.post('http://localhost:9090/follows/deleteUserUserById',this.userUserAddNewDTO).then((response) => {
        console.info(response.data);
        switch (response.data.code) {
          case 200:
            this.concerned=false
            this.$message({
              message: response.data.data,
              type: 'success'
            });
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }

      })

    },

    /**
     * 查询作者信息
     */
    user(userId) {
      this.axios.get("http://localhost:9090/system/users/getBackFillById?id=" + userId).then((response) => {
        this.userRuleForm = response.data;
      })
    },

    /**
     * 查询文章信息
     */
    article(articleId) {
      this.axios.get("http://localhost:9090/system/articles/selectById?id="+articleId).then((response) => {
        this.articleRuleForm = response.data.data;
        /*alert(response.data.data.userId)*/
        this.user(response.data.data.userId);
        this.concernedBy(response.data.data.userId);
      })
    },
   /*查询文章的浏览量*/
    selectViewCount(articleId){
      alert(articleId)
      this.axios.get("http://localhost:9090/api/articles/selectViewCount?id="+articleId).then((response) => {
        this.articleRuleForm.viewCount = response.data.data;

        // this.user(response.data.data.userId);
        // this.concernedBy(response.data.data.userId);
      })
     },

    // 判断当前用户是否关注此博客
    concernedBy(bloggerId){
      this.userUserAddNewDTO.bloggerId = bloggerId;
      console.info(bloggerId);
      this.axios.post("http://localhost:9090/follows/concerned/", this.userUserAddNewDTO).then((response) => {
        switch (response.data.code) {
          case 200:
            console.info(response.data.data===true)
              if (response.data.data==="true"){
                this.concerned = true;
              }else {
                this.concerned = false;
              }

            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },

    /**
     * 导航栏置顶
     */
    watchScroll() {
      let scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop;
      console.log(scrollTop)
      //  当滚动超过 90 时，实现吸顶效果
      if (scrollTop > 100) {
        this.navBarFixed = true;
      } else {
        this.navBarFixed = false;
      }
    },


    /*下载*/
    downloadClick() {
      this.axios.post("http://localhost:9090/download", this.articleRuleForm).then((response) => {
        this.$message({
          type: 'success',
          message: '下载成功!'
        });
      })
    },



    /*浏览历史*/
    history(id){
      let url= "http://localhost:9090/history/insert?articleId="+id
      this.axios.get(url).then((response)=>{

      })
    },
    /**
     * 发表评论
     */
    pushComment(){
      let url = "http://localhost:9090/api/comment/insert?content=" + this.content + "&articleId="
          + this.articleRuleForm.id
      this.axios.get(url).then((response)=>{
      })
      location.reload()
    }

  },
  /**
   * 防止用户刷新页面丢失数据
   */
  mounted() {
    window.addEventListener("scroll", this.watchScroll);

  },
  created() {
    let id = this.$route.query.id
    if (id !== undefined && id != null && id > 0) {
      // alert("即将进行修改："+id)
      this.axios.get("http://localhost:9090/api/articles/selectViewCount?id="+id);
      this.article(id)
      this.history(id)
      let  articleNum =id
      let url = "http://localhost:9090/api/comment/list/"+ articleNum +"?page=1&pageSize=5"
      this.axios.get(url).then((response) => {
        this.commentArr = response.data.data.list
        console.log(response)
      })
    } else {
      window.location.href = "https://www.baidu.com"
    }
    /*查询文章的浏览量*/
    // this.selectViewCount(id);

    // let hrefUrl = location.href;
    // let urlArr = hrefUrl.split("?")
    // let urlArr1 = urlArr[1].split("=")
    // let articleNum = urlArr1[1]

  },


}

</script>


<style>

.scroll {
  height: 2000px;
}

.nav1 {
  padding: 13px;
  width: 100%;
  box-sizing: border-box;
  background: #cedebd;
  text-align: center;
}

.nav2 {
  width: 300px;
  height: 400px;
  position: absolute;
  /*left: 200px;*/
  left: 10px;
  top: 60px;
}

.navBarWrap2 {
  position: relative;
  /*left: 200px;*/
  left: 10px;
  top: 120px;
  z-index: 999;
}

.navBarWrap1 {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

</style>



